// 模拟数据
var data = [
	{id: 1,returnNumber:"GH20220303001",assertDetail:'联想think plus会议平板；明基显示屏',returnDepartment:'产品部',returnPeople:'弥冬灵',returnDate:'2022-3-15',number:2,money:'8000.00',agent:'弥冬灵'},
	{id: 2,returnNumber:"GH20220303002",assertDetail:'联想think plus会议平板；明基显示屏',returnDepartment:'产品部',returnPeople:'弥冬灵',returnDate:'2022-3-15',number:2,money:'8000.00',agent:'弥冬灵'},
	{id: 3,returnNumber:"GH20220303003",assertDetail:'联想think plus会议平板；明基显示屏',returnDepartment:'安全部',returnPeople:'弥冬灵',returnDate:'2022-3-18',number:2,money:'8000.00',agent:'弥冬灵'},
	{id: 4,returnNumber:"GH20220303004",assertDetail:'联想think plus会议平板；明基显示屏',returnDepartment:'信息部',returnPeople:'弥冬灵1',returnDate:'2022-3-17',number:2,money:'8000.00',agent:'弥冬灵'},
	{id: 5,returnNumber:"GH20220303005",assertDetail:'联想think plus会议平板；明基显示屏',returnDepartment:'产品部',returnPeople:'张三',returnDate:'2022-3-16',number:2,money:'8000.00',agent:'弥冬灵'},
	{id: 6,returnNumber:"GH20220303005",assertDetail:'联想think plus会议平板；明基显示屏',returnDepartment:'产品部',returnPeople:'张三',returnDate:'2022-3-16',number:2,money:'8000.00',agent:'弥冬灵'},
]
// 获取表单内容标签
var tBody = document.querySelector('tbody')
// 新增归还按钮
var addBtn = document.querySelector('.add')
// 全选单选输入框
var selectAll = document.querySelector('.select-all input');
var selectSingle = document.getElementsByClassName('select-single');

// 分页
// 当前页码
var page = 1;
// 每页的条数
var count = 5;
// 获取分页容器
var oBetweenPage = document.querySelector('.pagination');
// 获取上一页的按钮
var oPreBtn = document.querySelector('.prev');
// 获取上一页的按钮
var oNextBtn = document.querySelector('.next');
// 获取搜索的输入框
var oSearch1 = document.querySelector('#name1')
var oSearch2 = document.querySelector('#name2')
var oSearch3 = document.querySelector('#name3')
// 获取搜索的按钮
var searchBtn = document.querySelector('.search-btn')
// 获取模态框输入框
var aInp = document.querySelectorAll('#modelForm input')

// 更新本地存储数据
/*function upDataLocalstorage(data) {
	localStorage.setItem('data',JSON.stringify(data))
}*/
/*// 全选
selectAll.onclick = function () {
	if (selectAll.checked) {
		for(var i = 0; i < selectSingle.length; i++) {
			selectSingle[i].checked = true;
		}
	}else {
		for(var i = 0; i < selectSingle.length; i++) {
			selectSingle[i].checked = false;
		}
	}
}*/
/*// 单选
$(document).ready(function (){
	for(var j = 0; j < selectSingle.length; j++){
		selectSingle[j].onclick = function () {
			for (var x = 0; x < selectSingle.length; j++) {
				if(!selectSingle[x].checked) {
					selectAll.checked = false;
					break;
				}
				selectAll.checked = true;
			}
		}
	}
})*/

var navBtn = document.querySelector('.second-nav-btn')
var secondNav = document.querySelector('.second-nav-display')
var  menuBtn = document.getElementsByClassName('menuBtn');
var assetBtn = document.querySelector('.asset');

menuBtn[1].nextElementSibling.style.display = "block";
menuBtn[1].lastElementChild.style.transform = "rotate(90deg)";
for(var i = 0; i < menuBtn.length; i++) {
	menuBtn[i].onclick = function () {
		if(this.nextElementSibling.style.display === "block") {
			this.nextElementSibling.style.display = "none";
			this.lastElementChild.style.transform = "rotate(360deg)";
		}else {
			this.nextElementSibling.style.display = "block";
			this.lastElementChild.style.transform = "rotate(90deg)";
		}
	}
}
/*document.addEventListener('click',toggleFn)
function toggleFn() {
	if (event.target.className === 'toggle'){
		$('.second-nav-display').toggle();
	}
}*/
$(".aaa").on("click", function(){
	$('.second-nav-display').slideToggle();
});

function render() {
	// 查看搜索输入框的内容、条件
	var str1 = oSearch1.value;
	var str2 = oSearch2.value;
	var str3 = oSearch3.value;
	var searchData = [];
	var data1 = [];
	var data2 = [];

	if(str1.trim() === '') {
		data1 = data;
	}else {
		data1 = data.filter(function (v){
			return v.returnDepartment.includes(str1)
		})
	}

	if(str2.trim() === '') {
		data2 = data1;
	}else {
		data2 = data1.filter(function (v){
			return v.returnPeople.includes(str2)
		})
	}

	if(str3.trim() === '') {
		searchData = data2;
	}else {
		searchData = data2.filter(function (v){
			return v.returnDate.includes(str3)
		})
	}
	tBody.innerHTML = '';
	var renderArr = searchData.slice((page-1) * count, page * count);

	// 循环要渲染的数据
	for (var i = 0; i < renderArr.length; i++) {
		// 创建tr
		var oTr = document.createElement('tr');
		// 给tr加内容
		oTr.innerHTML = `
			<!-- <td class="radio-box"><input type="checkbox" class="select-single"></td>-->
			 <td>${renderArr[i].returnNumber}</td>
			 <td>${renderArr[i].assertDetail}</td>
			 <td>${renderArr[i].returnDepartment}</td>
			 <td>${renderArr[i].returnPeople}</td>
			 <td>${renderArr[i].returnDate}</td>
			 <td>${renderArr[i].number}</td>
			 <td>${renderArr[i].money}</td>
			 <td>${renderArr[i].agent}</td>
			 <td>
				 <div class="btn edit" style="color: #4F93F6">编辑</div>
				 <div class="btn del" style="color: red">删除</div>
			</td>
		`
		// 把tr加到tbody中
		tBody.appendChild(oTr);
	}
	// 渲染页码
	var aPageBtn = document.querySelectorAll('.pageBtn');
	// 删除所有的页码
	for(var i = 0; i < aPageBtn.length; i++) {
		oBetweenPage.removeChild(aPageBtn[i].parentNode);
	}
	// 根据数组的长度重新创建页码
	for(var i = 1; i <= Math.ceil(searchData.length / count); i++) {
		// 创建li
		var oLi = document.createElement('li');
		// 给li创建内容
		oLi.innerHTML = `<span class="pageBtn">${i}</span>`;
		// li和当前页码一致
		if(i === page) {
			oLi.classList.add('active');
		}
		// 插入创建好的li至上下一页中
		oBetweenPage.insertBefore(oLi,oBetweenPage.lastElementChild);
	}
}
render();
// 点击搜索按钮事件
searchBtn.onclick = function () {
	event.preventDefault();
	render()
}
//给分页加事件
oBetweenPage.addEventListener('click', changePage);
function changePage() {
	//如果当前点击的按钮有pageBtn这个class名字
	if (event.target.className === 'pageBtn') {
		//修改全局的page
		page = event.target.innerText;
		//渲染table，渲染分页
		render();
	}
}
//给上一页和下一页加事件
oPreBtn.addEventListener('click',prev);
oNextBtn.addEventListener('click',next);
function prev(){
	if(page>1){
		page--;
		render();
	}
}
function next(){
	if(page<Math.ceil(data.length / count)){
		page++;
		render();
	}
}

// 添加的时候
addBtn.onclick = function () {
	var oInp = document.querySelectorAll('#addModal input')
	event.preventDefault();
	for(var i = 0; i < oInp.length; i++) {
		oInp.value = '';
	}
	$('#addModal').modal('show');
}

// 表单验证
/*{id: 1,returnNumber:"GH20220303001",assertDetail:'联想think plus会议平板；明基显示屏',returnDepartment:'产品部',returnPeople:'弥冬灵',returnDate:'2022-3-15',number:2,money:'8000.00',agent:'弥冬灵'},*/
var rule = {
	assertDetail: {
		reg:  /^[\u4e00-\u9fa5]{2,15}$/,
		err: '长度为20'
	},
	returnDepartment: {
		reg: /^[\u4e00-\u9fa5]{2,6}$/,
		err: '产品部、IT部、信息部...'
	},
	returnPeople: {
		reg: /^[\u4e00-\u9fa5]{2,6}$/,
		err: '归还人姓名：汉字'
	},
	returnDate: {
		reg: /^\d{4}-\d{2}-\d{2}$/,
		err: 'yyyy-MM-dd'
	},
	number: {
		reg: /^\d$/,
		err: '数量'
	},
	money: {
		reg:/^([1-9]\d{0,9}|0)(\.\d{1,2})?$/,
		err: '金额'
	},
	agent: {
		reg: /^[\u4e00-\u9fa5]{2,6}$/,
		err: '经办人姓名：汉字'
	}
}
function test(obj){
	var str = obj.value;
	console.log('str',str)
	if (str.trim() === '') {
		obj.classList.add('red');
		return false;
	} else if (rule[obj.name].reg.test(str) === false) {
		obj.classList.add('red');
		obj.placeholder = rule[obj.name].err;
		return false;
	} else {
		obj.classList.remove('red');
		return true;
	}
}

//输入框
for (var i = 1; i < aInp.length; i++) {
	aInp[i].onblur = function () {
		test(this);
	}
}

// 点击新增保存按钮
var addSaveBtn = document.querySelector('.addSaveBtn')
addSaveBtn.onclick = function () {
	document.querySelector('.returnNumber').value = 'GH'+Date.now();
	var str1 = document.querySelector('.returnNumber').value;
	var str2 = document.querySelector('.assertDetail').value;
	var str3 = document.querySelector('.returnDepartment').value;
	var str4 = document.querySelector('.returnPeople').value;
	var str5 = document.querySelector('.returnDate').value;
	var str6 = document.querySelector('.number').value;
	var str7 = document.querySelector('.money').value;
	var str8 = document.querySelector('.agent').value;
	for(var i = 1; i < aInp.length; i++) {
		if (aInp[i].value === '') {
			alert('仍有未填项，请输入完整');
			return;
		}
	}
	for(var i = 1; i < aInp.length; i++) {
		if (test(aInp[i]) === false) {
			alert('输入格式不正确，请修改');
			return;
		}
	}
	data.push({
		id:Date.now(),
		returnNumber: str1,
		assertDetail: str2,
		returnDepartment:str3,
		returnPeople: str4,
		returnDate: str5,
		number: str6,
		money: str7,
		agent: str8,
	})
	render();
	$('#addModal').modal('hide')
}

// 编辑的时候
var edit = document.querySelector('.edit');
tBody.addEventListener('click',editFn)
function editFn() {
	if (event.target.className.includes('edit')) {
		$('#editModal').modal('show');
		// 找到点击的id
		var id = event.target.parentNode.parentNode.children[0].innerText;
		console.log(id)
		for(var i = 0; i < data.length; i++){
			if (data[i].returnNumber == id) {
				document.querySelector('.returnNumber1').value = data[i].returnNumber;
				document.querySelector('.assertDetail1').value = data[i].assertDetail;
				document.querySelector('.returnDepartment1').value = data[i].returnDepartment;
				document.querySelector('.returnPeople1').value = data[i].returnPeople;
				document.querySelector('.returnDate1').value = data[i].returnDate;
				document.querySelector('.number1').value = data[i].number;
				document.querySelector('.money1').value = data[i].money;
				document.querySelector('.agent1').value = data[i].agent;
			}
		}
	}
}
// 点击编辑保存的时候
var editSaveBtn = document.querySelector('.editSaveBtn');
editSaveBtn.onclick = function () {
	var id = document.querySelector('.returnNumber').value;
	for(var i = 0; i < data.length; i++) {
		if(data[i].returnNumber == id) {
			data[i].assertDetail = document.querySelector('.assertDetail1').value;
			data[i].returnDepartment = document.querySelector('.returnDepartment1').value;
			data[i].returnPeople = document.querySelector('.returnPeople1').value;
			data[i].returnDate = document.querySelector('.returnDate1').value;
			data[i].number = document.querySelector('.number1').value;
			data[i].money = document.querySelector('.money1').value;
			data[i].agent = document.querySelector('.agent1').value;
		}
	}
	$('#editModal').modal('hide');
	render();
}
// 删除的时候
var del = document.querySelector('.del');
del.onclick = function () {
		$('#delModal').modal('show');
}
var delResBtn = document.querySelector('.delResBtn');
delResBtn.onclick = function () {
	for(var i = 0; i < data.length; i++) {
			data.splice(i,1)
	}
	$('#delModal').modal('hide');
	render();
}
